<template>
	<view>
		<u-navbar title="商品详情页" :autoBack="true" :placeholder="true" titleStyle="color:#fff" bgColor="#7e5a91"
			leftIconColor="#fff"></u-navbar>

		<view class="container">

			<view class="slideshow-box">
				<u-swiper height="480rpx" radius="0" :list="productDetail.goods_image"></u-swiper>
			</view>

			<view class="product">
				<view class="product-name">
					{{productDetail.name}}
				</view>

				<view class="add-item-right">
					<view class="add-item-subtotal">
						￥{{productDetail.price}}元
					</view>
				</view>
			</view>

			<view class="product-main-info">
				<view class="product-main-info-item">
					<span class="iconfont icon-zhuanjiaguanli icons"></span> {{productDetail.grade}}
				</view>
				<view class="product-main-info-item">
					<span class="iconfont icon-weizhi1 icons"></span> {{productDetail.adress_det}}
				</view>
				<view class="product-main-info-item">
					<span class="iconfont icon-rili icons"></span> {{productDetail.month}}
				</view>
				<view class="product-main-info-item">
					<span class="iconfont icon-history icons"></span> {{productDetail.zhouqi}}
				</view>
			</view>

			<view class="tab-box">
				<u-tabs itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 88rpx;" :list="list1"
					@click="coursetabChange" lineColor="#7e5a91"></u-tabs>
			</view>

			<view class="course-box">
				<view class="" v-if="courseIdx == 0">
					<u-parse :content="productDetail.detail_text"></u-parse>
				</view>
				<view class="" v-if="courseIdx == 1">
					<u-parse :content="productDetail.tese"></u-parse>
				</view>
				<view class="" v-if="courseIdx == 2">
					<u-parse :content="productDetail.fuwu"></u-parse>
				</view>
				<view class="" v-if="courseIdx == 3">
					<u-parse :content="productDetail.anpai"></u-parse>
				</view>
			</view>


			<view class="sub-btn-box">
				<view class="sub-btn" @click="navigateTo" :data-url="'/subPages/apply/apply?id=' + id">
					申请报名
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null, //商品id
				productDetail: {}, //产品详情
				list1: [{
					name: '课程介绍',
				}, {
					name: '课程特色',
				}, {
					name: '课程服务'
				}, {
					name: '课程安排'
				}],
				courseIdx: 0, //课程tab下标
			}
		},
		onLoad(options) {

			// if (decodeURIComponent(options.q)) {
			// 	this.id = decodeURIComponent(options.q).split('id=')[1]
			// } else {
			// 	try {
			// 		this.id = options.id;
			// 	} catch (e) {
			// 		//TODO handle the exception
			// 	}
			// }

			try {
				this.id = options.id;
			} catch (e) {
				//TODO handle the exception
			}
			
			

		},
		onShow() {
			this.gettourgoodbyid();
		},
		methods: {
			// 获取课程详情
			async gettourgoodbyid() {
				let res = await this.$api.gettourgoodbyid({
					id: this.id
				});
				// console.log()
				if (res.data != null) {
					this.productDetail = res.data;;
					let imgs = res.data.goods_image.split(',');
					this.productDetail.goods_image = imgs.filter((item) => item !== "");
				} else {
					this.$u.toast(res.msg)
				}

			},

			// 课程tab切换
			coursetabChange(e) {
				this.courseIdx = e.index;
			},

			// 页面跳转
			navigateTo(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: white;
		// padding-bottom: 120rpx;

		.slideshow-box {
			height: 480rpx;

			&-img {
				width: 100%;
			}
		}

		.product {
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			padding: 0 20rpx;
			justify-content: space-between;
			color: #666;
			border-bottom: 4rpx solid #ddd;

			.product-name {
				font-size: 24rpx;
			}

			.add-item-right {
				.icon-xiangyou {
					margin-left: 10rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.add-item-subtotal {
					height: 60rpx;
					line-height: 60rpx;
					color: white;
					padding: 0 10rpx;
					background-color: #e00000;
					margin: 10rpx 0;
				}

			}
		}

		.product-main-info {
			background-color: white;
			padding: 0 20rpx;
			border-bottom: 4rpx solid #ddd;

			.product-main-info-item {
				font-size: 26rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #666;

				.icons {
					margin-right: 10rpx;
				}
			}
		}

		.tab-box {
			border-bottom: 4rpx solid #ddd;
		}

		.course-box {
			padding: 20rpx 20rpx 120rpx 20rpx;
			font-size: 24rpx;
		}

		.sub-btn-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 0 0rpx 0rpx 0;
			margin-top: 50rpx;

			.sub-btn {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: white;
				font-size: 28rpx;
				background-color: #7e5a91;
			}
		}
	}
</style>